<template>
  <div class="container">
    <el-row type="flex" justify="space-between">
      <!-- 订单表单 -->
      <OrderForm
        v-if="airInfo.insurances"
        :data="airInfo"
        @setTotalPrice="setTotalPrice"
      />

      <!-- 侧边栏 -->
      <div class="aside">
        <OrderAside
          v-if="airInfo.insurances"
          :data="airInfo"
          :price="flightPrice"
          :userNumber="userlength"
        />
      </div>
    </el-row>
  </div>
</template>

<script>
import OrderForm from "@/components/air/OrderForm";
import OrderAside from "@/components/air/OrderAside";
export default {
  data() {
    return {
      airInfo: {},
      flightPrice: 0,
      userlength: 1,
    };
  },
  components: {
    OrderForm,
    OrderAside,
  },
  mounted() {
    //   进入订单页获取机票信息---并传值给子组件
    this.$axios({
      url: `/airs/${this.$route.query.id}`,
      params: {
        seat_xid: this.$route.query.seat_xid,
      },
    }).then((res) => {
      console.log(res.data);
      this.airInfo = res.data;
    });
  },
  methods: {
    // 监听子组件orderform传来的总价格处理函数
    setTotalPrice(totalPrice, userlength) {
      console.log(totalPrice, userlength);
      this.flightPrice = totalPrice;
      this.userlength = userlength;
    },
  },
};
</script>

<style lang="less" scoped>
.container {
  width: 1000px;
  margin: 20px auto;
}

/*aside*/
.aside {
  width: 350px;
  height: fit-content;
  border: 1px #ddd solid;
}
</style>